<template>
  <div>
<!-- <h1>收藏夹选择</h1> -->
<div style="overflow:scroll; height: auto;" >
      
          <van-picker
          title="请选择收藏夹"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
        />

        </div>
  </div>
</template>

<script>
import CollectAPI from "@/api/CollectAPI.js";

export default {
name: "SelectCollect",

data() {
  return {
    columns: [],
    collectlist:[],  
    checkboxResult:[],
    collectIds:[],
    value: "",
    tbCollect:{
      id:"",
      musicId:"",
      collectId:""
    }
  }
},

created() {
  // 根据登陆的用户获取收藏夹列表
  this.getMyColletList();

},


methods: {
  

    onConfirm(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
      // this.$toast(this.collectlist[index].collectId)
      this.tbCollect.musicId=this.ItMusicId
      this.tbCollect.collectId=this.collectlist[index].collectId
      this.add2MyCollect();

    },
 
    onCancel() {
      this.$toast('取消');
      
    },


    add2MyCollect(){
      var result = CollectAPI.AddMusic2Collect(this.tbCollect);
        // 获取返回结果
       result.then((val) => {
        // console.log(val);
        if (val.success) {
          this.$toast("收藏成功！！");
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });
    },

    // 获取我的收藏夹列表
    getMyColletList(){
          // 获取我的收藏夹列表
      var result = CollectAPI.MyCollectList();
        // 获取返回结果
       result.then((val) => {
        // console.log(val);
        if (val.success) {
            // 将数据存到list里面
            this.collectlist = val.data;
            for( let i = 0; i < this.collectlist.length; i++ ){
                  this.columns.push(this.collectlist[i].collectName)
            }
            console.log(this.columns)
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });
  
    }
},

props:{
  // 收藏的音乐id
  ItMusicId:{
    required: true,
      type: String
  }
},
}
</script>

<style>

</style>